/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
import React, { Component } from 'react';
import {NavigationActions} from 'react-navigation'
import { connect } from 'react-redux';
import Toast, {DURATION} from 'react-native-easy-toast'

import {
  StyleSheet,
  Text,
  View,
  Image,
} from 'react-native';
import * as Actions from '../redux/actions/userAction';
import EditView from '../lib/EditView';
import LoginButton from '../lib/LoginButton';
import Loading from "../components/Loading";

class LoginActivity extends Component {
  constructor(props) {
    super(props);
    this.name = "";
    this.password = "";
  }
  render() {
      const {navigation} = this.props;
      const paramKey = navigation.getParam('paramKey',"defaultValue");
      console.log("正在实例化LoginActivity");
      //console.log("isFocused",navigation.isFocused());
      console.log("paramKey:",paramKey);
      console.log("this.props login:",this.props);
      return (
    <View style={LoginStyles.loginview}>



        <Text>当前登录状态：{this.props.isLoggedIn ? "已经登录" : '未登录'}</Text>

     <View   style={{flexDirection: 'row',height:100,marginTop:1,
        justifyContent: 'center',
        alignItems: 'flex-start',}}>
       <Image source={require('../assets/image/login.png')}/>
     </View>
     <View style={{marginTop:80}}>
       <EditView  name='输入用户名' onChangeText={(text) => {
            this.name = text;
        }}/>
       <EditView name='输入密码' onChangeText={(text) => {
            this.password = text;
        }}/>
        <LoginButton name='登录' onPressCallback={()=>this.props.login({name:this.name,password:this.password,age:15})}/>
        <Text style={{color:"#4A90E2",textAlign:'center',marginTop:10}} >忘记密码？</Text>
      </View>
        <View style={{flex:1}}>{this.props.status == 'doing' ? <Loading/> : (<Text>今天是怎么回事啊</Text>)}</View>


        <Toast ref="toast"/>
     </View>
   )
  }


   shouldComponentUpdate(nextProps){
      console.log("shouldComponentUpdate: next props:",nextProps);
      if(nextProps.isLoggedIn){
          this.refs.toast.show("登录成功!",'center');
      }else{
          this.refs.toast.show("登录失败!",'center');
      }

      return true;
  }



}



const LoginStyles = StyleSheet.create({
    loginview: {
        flex: 1,
        padding: 30,
          backgroundColor: '#ffffff',
    },
    toast: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
});

//by song
//只要 Redux store 发生改变，mapStateToProps 函数就会被调用
// return 存放当前需要存放的数据
// mapStateToProps中返回的就是组件需要的数据(从store的state中取的)，最终这些数据会变成组件props的一部分
//比如 state.homeIndex被某个reducer改成如下{status: 200,serverTime: 1314} 组件的props被更新后，就可以通过 this.props.status和this.props.serverTime得到这些值
const mapStateToProps = (state)=>{
  console.log("mapStateToProps state是:",state);
  return {
      isLoggedIn:state.userStore.isLoggedIn,
      user: state.userStore.user,
      status: state.userStore.status,
      info:state.userStore.info,
  }
};

//return 的是组件中需要放在props中的方法
mapDispatchToProps = (dispatch) => {
    return {
        // login: (user)=>{
        //     dispatch(Actions.login(user));
        //     //dispatch(NavigationActions.back());
        // },
        login:(user)=>{dispatch(Actions.dologin(user))}
    }

};
//connect(mapStateToProps, mapDispatchToProps, mergeProps)(MyComponent)
export default connect(mapStateToProps,mapDispatchToProps)(LoginActivity);

